<template>
	<view >
		<view :style="{'height':safeTop+60 + 'px'}"></view>
		<view class="my2">
			<view class="settings" @click="settings">
				用户设置
			
			</view>
			<view class="my2l">
				<image :src="data.avatar || imgHost + '/statics/assets/avatar.jpg'" style="width: 140rpx;height: 140rpx;" mode=""></image>
			</view>
			<view class="my2r">
				<view class="t1" style="font-weight: bold;" @click="changeNickname">
					{{data.nickname}}
				</view>
				<view class="t2" v-if="data.order_finish == 0">
					预备调香师
				</view>
				<view class="t3" v-if="data.order_finish > 0">
					高级AI调香师
				</view>
			</view>
		</view>
		<view class="my3">
			<!-- <view class="item" @click="goto('order/order')">
				<view class="t">
					{{data.order0}}
				</view>
				<view class="b">
					可制作
				</view>
			</view> -->
			<view class="item" @click="$util.JumpPath('/pages/tiaoxiang/manage')">
				<view class="t">
					{{data.hash}}
				</view>
				<view class="b">
					管理配方
				</view>
			</view>
			<!-- <view class="item" @click="goto('order/order?status=1')">
				<view class="t">
					{{data.order1}}
				</view>
				<view class="b">
					已制作
				</view>
			</view> -->
			<!-- 需要处理下 -->
			<view class="item" @click="$util.JumpPath('/pages/goods/order_list/index')">
				<view class="t">
					{{data.order_count}}
				</view>
				<view class="b">
					我的订单
				</view>
			</view>
			
			
			<view class="item" @click="$util.JumpPath('/pages/users/user_spread_user/index')">
				<view class="t">
					0
				</view>
				<view class="b">
					已推荐
				</view>
			</view>
			
			<view class="item"  @click="$util.JumpPath('/pages/goods/goods_comment_list/index?product_id=3')">
				<view class="t">
					0
				</view>
				<view class="b">
					查看评论
				</view>
			</view>
			
			
		</view>
		<view v-if="!showFirst">
		<!--
			<view class="my4">
				
				请在下方选择你想调配的方式<br>
				我们就可以正式开始了
			</view>-->
			<view class="my5">
				
				<view class="item" @click="$util.JumpPath('/pages/tiaoxiang/ai')">
					<view class="l">
						<view class="t1" style="font-weight: bold;">
							AI大模型全自动化定制
						</view>
						<view class="t2">
							通过您的MBTI、喜好、职业、年龄、星座等个人特性，<br />
							运用国际顶尖AI大模型为您调制专属香气
						</view>
					</view>
					<view class="r">
						<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
					</view>
				</view>
				<view class="item" @click="success=true">
					<view class="l">
						<view class="t1" style="font-weight: bold;">
							AI大模型需求向定制
						</view>
						<view class="t2"> 
							自己随意输入香型、场景等调香需求，<br />
							由AI大模型深度综合分析为您定制专属香气，时间较长
						</view>
					</view>
					<view class="r">
						<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
					</view>
				</view>
				<view class="item" @click="$util.JumpPath('/pages/tiaoxiang/workbenchTiao')">
					<view class="l">
						<view class="t1" style="font-weight: bold;">
							DIY自选香料定制
						</view>
						<view class="t2">
							任意选择自己喜欢的香料及比例，调制更个性化的味道<br />
							由AI大模型与资深调香师辅助优化配方，无须担心踩雷
						</view>
					</view>
					<view class="r">
						<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
					</view>
				</view>
				<view class="item" @click="$util.JumpPath('/pages/tiaoxiang/official')">
					<view class="l">
						<view class="t1" style="font-weight: bold;">
							官方精选配方库
						</view>
						<view class="t2">
						直接选择官方精选大师调香成品配方，<br />
						或输入专属香号直接调制其它用户分享配方
						</view>
					</view>
					<view class="r">
						<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
					</view>
				</view>
				<view class="item" style="display: none;">
					<view class="l">
						<view class="t1" style="font-weight: bold;">
							直接选择官方配方
						</view>
						<view class="t2">
							懒得定制可以选这里，简单省事， <br>
							直接选择官方调配好的味道，
						</view>
					</view>
					<view class="r">
						<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="triangle"></view>
			<view class="ttext" style="font-size: 26rpx; text-align: center;">以上三种模式任选一种就可以噢~</view>
		</view>
		<view class="footer">
			<view class="inputbox">
				<view class="l">
					<input type="text" v-model="order_id" :placeholder-style='{"font-size":"23rpx"}' placeholder="若您一次性下了多个订单，需在此处手动输入订单号" />
				</view>
				<view class="r" @click="bind">
					绑定
				</view>
			</view>
			
		</view>
		
		<u-popup :customStyle="{'width':'100%','padding':'40rpx'}" overlayOpacity="0.8" bgColor="transparent" closeable :show="showFirst" mode="center" @close="closeShowFirst"  >
			 <u-transition :show="showFirst" mode="fade" duration="500">
					
					<view class="my5" @click="closeShowFirst()">
						
						<view class="item" @click="$util.JumpPath('/pages/tiaoxiang/ai')">
							<view class="l">
								<view class="t1" style="font-weight: bold;">
									AI大模型全自动化定制
								</view>
								<view class="t2">
									通过您的MBTI、喜好、职业、年龄、星座等个人特性，<br />
									运用国际顶尖AI大模型为您调制专属香气
								</view>
							</view>
							<view class="r">
								<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
							</view>
						</view>
						<view class="item" @click="success=true">
							<view class="l">
								<view class="t1" style="font-weight: bold;">
									AI大模型需求向定制
								</view>
								<view class="t2"> 
									自己随意输入香型、场景等调香需求，<br />
									由AI大模型深度综合分析为您定制专属香气，时间较长
								</view>
							</view>
							<view class="r">
								<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
							</view>
						</view>
						<view class="item" @click="$util.JumpPath('/pages/tiaoxiang/workbenchTiao')">
							<view class="l">
								<view class="t1" style="font-weight: bold;">
									DIY自选香料定制
								</view>
								<view class="t2">
									任意选择自己喜欢的香料及比例，调制更个性化的味道<br />
									由AI大模型与资深调香师辅助优化配方，无须担心踩雷
								</view>
							</view>
							<view class="r">
								<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
							</view>
						</view>
						<view class="item" @click="$util.JumpPath('/pages/tiaoxiang/official')">
							<view class="l">
								<view class="t1" style="font-weight: bold;">
									官方精选配方库
								</view>
								<view class="t2">
								直接选择官方精选大师调香成品配方，<br />
								或输入专属香号直接调制其它用户分享配方
								</view>
							</view>
							<view class="r">
								<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
							</view>
						</view>
						<view class="item" style="display: none;">
							<view class="l">
								<view class="t1" style="font-weight: bold;">
									直接选择官方配方
								</view>
								<view class="t2">
									懒得定制可以选这里，简单省事， <br>
									直接选择官方调配好的味道，
								</view>
							</view>
							<view class="r">
								<image :src=" imgHost + '/statics/assets/rightg.png'" style="width: 13rpx;height: 24rpx;" mode=""></image>
							</view>
						</view>
						<view class="footer">
							<view class="inputbox">
								<view class="l-border">
									<input type="text" v-model="order_id" :placeholder-style='{"font-size":"23rpx"}' placeholder="若您一次性下了多个订单，需在此处手动输入订单号" />
								</view>
								<view class="r" @click="bind">
									绑定
								</view>
							</view>
							
						</view>
					</view>
					
		         </u-transition>
			</u-popup>
			<u-modal :show="false" :confirmStyle="{'background':'#000000'}" confirmColor="#FFFFFF" @cancel="nicknameBox=false" @confirm="submitEdit" showCancelButton="true" confirmText="修改" :title="'修改昵称'" >
				<input
				:style="{border:'1px solid #c1c1c1','padding':'10rpx','border-radius':'10rpx','width':'100%'}"
					placeholder="请填写新昵称"
					border="surround" 
					v-model="nickname"
				  /> 
			</u-modal> 
			<u-popup :show="success" :closeable="true" mode="center"  @close="closeMakeNeed"  bgColor="transparent">
				<view class="dialogBox" :style="{'background':'url('+imgHost+'/statics/assets/dialogBg.png) no-repeat top center','background-size':'100% 100%'}">
					<view class="til">请您在下方直接输入您的调香需求</view>
					<view class="lineBox" :style="{background: 'url('+imgHost+'/statics/assets/lineBg.png) no-repeat top center','background-size':'100% 100%'}">
						 <view class="placeholder" v-if="makeNeed == ''">
							 您可以在这里直接输入您的要求 <br>比如<br>偏好香调、雷区香调 <br>需要什么样的香气、适用什么场合之类的 <br>比如： 我不喜欢果香调，使用场景在
						 </view>
						 <textarea  v-model="makeNeed" placeholder="" style="background-color: transparent; width: 600rpx; line-height: 60rpx; height: 450rpx;" ></textarea >
						 请根据上方需求帮我调配香氛配方
					</view>
					
					<view class="haxi3" @click="submitNeed" :style="{background:'url('+imgHost+'/statics/assets/dialog_bt.png) no-repeat'}">
						提交调香需求获取配方
					</view>  
				</view>
			</u-popup>
	</view>
	

	
</template>

<script>
	import {bind} from '@/api/order';
	import {getUserInfo,editNeed} from '@/api/user';
	import {HTTP_REQUEST_URL} from '@/config/app';
	import Cache from '@/utils/cache';
	export default {
		data() {
			return {
				showFirst:false,
				makeNeed : '',
				imgHost : '',
				safeTop : 0,
				nickname : '',
				nicknameBox : false,
				showContent:false,
				data : {
					hash: 0,
					order_count : 0,
					real_name : '',
					nickname : ''
				},
				order_id : '',
				success:false,
				value1:''
			};
		},
		onShow() {
			this.showFirst = Cache.get('show_first') || false;
		},
		onLoad() {
			// 获取系统信息
			    uni.getSystemInfo({
			      success: (res) => {
			        // 设置容器的安全区域
			        let safeAreaInsets = res.safeAreaInsets;
			        this.safeTop = safeAreaInsets.top;
			        this.safeBottom = safeAreaInsets.bottom;
					
			      }
			    });
			this.imgHost = HTTP_REQUEST_URL;
			if ( Cache.get('order_id') ){
				/*
				updateNotifyOrder(Cache.get('order_id')).then(res =>{
					Cache.clear('order_id');
					this.getUserinfo();
				}).catch(e =>{
					Cache.clear('order_id');
				});*/
			}
			/*
			actionLog({"url" : 'pages/myindex/myindex','mark' : ''}).then(res =>{
				
			}).catch( e =>{
				
			});
			*/
			this.getUserinfo();
		},
		methods: {
			closeMakeNeed(){
				this.success = false;
			},
			submitNeed(){
				editNeed(this.makeNeed).then(res =>{
					uni.$u.toast(res.msg);
					this.success = false;
				}).catch(e =>{
					uni.$u.toast(e);
				})
			},
			closeShowFirst(){
				this.showFirst=false;
				Cache.clear('show_first');
			},
			submitEdit(){
				updateUserInfo({truename:this.nickname}).then( ret =>{
					this.nicknameBox=false;
					uni.$u.toast(ret.msg);
					this.getUserinfo();
				} ).catch(e =>{
					uni.$u.toast(e || e.msg);
				});
			},
			changeNickname(){
				this.nicknameBox=true;
			},
			getUserinfo(){
				getUserInfo().then(res =>{
					this.data = res.data;
					Cache.set("truename",res.data.truename)
					this.makeNeed = res.data.make_need;
					if ( !Cache.get("show_first") ){
						if ( this.data.login_times == 1 && !this.showFirst ){
							Cache.set("show_first",true);
						}else{
							Cache.set("show_first",false);
						}
						
						this.nickname = res.data.truename
						this.showFirst = Cache.get("show_first");
						let that = this;
						setTimeout(function(){
							that.showContent = true;
							
						},500);
					}
					
					
				}).catch(e =>{
					uni.$u.toast(e.msg);
				})
			},
			logout(){
				uni.showModal({
					content:'确认要退出登录吗？',
					success: (res) => {
						if ( res.confirm ){
							store.commit('LOGOUT');
							this.goto('login/login')
						}
					}
				})
			},
			settings(){
				this.$util.JumpPath("/pages/users/user_info/index");
			},
			bind(){
				if ( this.order_id == '' ){
					uni.$u.toast('请填写订单号');
					return false;
				}
				bind(this.order_id).then(res =>{
					uni.showModal({
						content:res.msg,
						showCancel:false
					});
					this.getUserinfo();
				}).catch(e =>{
					uni.$u.toast(e);
				})
			},
			inputhaxi(){
				uni.navigateTo({
					url:'/pages/tiaopei4/tiaopei4?action=official'
				})
				/*
				let that = this;
				uni.showModal({
					editable:true,
					content:'',
					confirmColor:'#333',
					title:'请输入您要定制的配方哈希值',
					placeholderText:'请输入',
					success: function (res) {
							if (res.confirm) {
								//goto('tiaopei5?hash='+res.confirm)
								getTiaopeiByHash(res.content).then(ret =>{
									uni.navigateTo({
										url:'/pages/tiaopei5/tiaopei5?id='+ret.data.id
									})
									
								}).catch(e =>{
									console.log(e);
									that.toast(e.msg);
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
				})*/
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
		padding:30rpx 30rpx;
		height: 100vh;
		box-sizing: border-box;
	}
	.triangle {
		width: 0;
		height: 0;
		border-right: 14rpx solid transparent;
		border-left: 14rpx solid transparent;
		border-bottom: 14rpx solid #000;
		margin: 45rpx auto 25rpx auto;
	}

	.my2{
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;
		margin-top: 20rpx;
		.settings{
			position: absolute;
			top: 60rpx;
			right: 0;
			font-size: 30rpx;
			color: #333;
			text-decoration: underline;
		}
		.my2l{
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			overflow: hidden;
			// border: 1px solid #333;
			margin-right: 40rpx;
		}
		.my2r{
			.t1{
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}
			.t2{
				width: 180rpx;
				height: 50rpx;
				background-color: #dddddd;
				color: #666;
				font-size: 24rpx;
				border-radius: 25rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
			}
			.t3{
				width: 180rpx;
				height: 50rpx;
				background-color: #000;
				color: #FFF;
				font-size: 24rpx;
				border-radius: 25rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
			}
		}
	}
	.my3{
		display: flex;
		margin-bottom: 40rpx;
		.item{
			flex: 1;
			text-align: center;
			.t{
				font-size: 38rpx;
				color: #000;
				margin-bottom: 20rpx;
			}
			.b{
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	.first-show{
		padding: 50rpx 20rpx;
	}
	.my4{
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.6;
		margin-bottom: 40rpx;
	}
	.first-show-my4{
		text-align: center;
		font-size: 40rpx;
		margin-top: 100rpx;
		color: #fff;
		line-height: 1.6;
		
	}
	.my5{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		margin-top: 60rpx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #e5e5e5;
			.l{
				flex: 1;
				.t1{
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
				}
				.t2{
					font-size: 24rpx;
					line-height: 1.6;
				}
			}
		}
		.item:last-child{
			margin-bottom: 0;
			padding-bottom: 0;
			border: none;
		}
	}
	.footer{
		
		margin-bottom: 100rpx;
		
		margin-top: 45rpx;
		.tips{
			text-indent: 20rpx;
			font-size: 20rpx;
			margin-top: 30rpx;
			color: #333;
		}
		.inputbox{
			display: flex;
			align-items: center;
		}
		.l{
			flex: 1;
			input{
				width: 100%;
				border-radius: 10rpx;
				background-color: #fff;
				height: 70rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
			}
		}
		.l-border{
			flex: 1;
			input{
				width: 100%;
				border-radius: 10rpx;
				background-color: #fff;
				height: 70rpx;
				padding: 0 20rpx;
				border: 1px solid #CCC;
				box-sizing: border-box;
				font-size: 28rpx;
			}
		}
		.r{
			border-radius: 10rpx;
			background-color: #000;
			height: 70rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 20rpx;
			margin-left: 20rpx;
		}
	}
	.dialogBox{
		
		background-size: 100% 100%;
		min-height: 300rpx;
		margin:0 40rpx; 
		padding: 50rpx 50rpx 50rpx 50rpx;
		position: relative;
		.lineBox{
			
			background-size: 100% 100%; 
			width: 600rpx;
			height: 551rpx;
		}
		.placeholder{
			position: absolute;
			left: 30px;
			top:90px;
			line-height: 60rpx;
			color: #666;
		}
		.til{
			font-size: 40rpx;
			padding:20px 0;
			font-weight: bold;
		}
		.saveHasMaske{
			position: absolute;
			background-color: rgb(170, 0, 0);
			left: -30rpx;
			top:15rpx;
			width:240rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 30rpx; 
			color: #FFF; 
			transform: rotate(-20deg); 
		}
		.logoh{
			width: 213rpx;
			height: 168rpx;
			margin: 0 auto;
			display: block;
			padding-bottom: 30rpx;
		}
		.til_code{
			width: 100%;
			height: 80rpx;
			background-color: #000;
			color:#fff;
			line-height: 80rpx;
			font-size: 46rpx;
			text-align: center;
			
		}
		.info1,.info2{
			padding: 30rpx 0;
			border-bottom: 1px solid #000;
			margin-bottom: 30rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			// font-weight: bold;
			color: #000;
		}
		.info2{
			font-size: 24rpx;
			line-height: 46rpx;
			padding: 0rpx 0 20rpx 0;
			border-bottom: none;
		}
		.info2 h2{
			text-align: center;
		}
		.haxi3{
			
			background-size: 100% 86rpx;
			color: #fff;
			font-size: 36rpx;
			line-height: 86rpx;
			text-align: center;
			font-weight: bold;
		}
		.close{
			text-align: right;
			.btnClose{
				width: 47rpx;
				height: 47rpx;
				margin-right: -20rpx;
			}
		}
	}
	
	
	
</style>
